import React, { PureComponent } from 'react'
import { CSSTransition } from 'react-transition-group'
import { connect } from 'react-redux'
import { actionCreators } from './store'
import { actionCreators as loginActionCreators } from '../../pages/login/store'
import { Link } from 'react-router-dom'
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  NavSearchTips,
  NavSearchTitle,
  NavSearchSwitch,
  NavSearchItem,
  Addition,
  Button,
  SearchWrapper,
} from './style'

const getSearchList = (show) => {
  if (show) {
    return (
      <NavSearchTips>
        <NavSearchTitle>
          热门搜索
              <NavSearchSwitch>
            <i className="iconfont spin">&#xe851;</i>
            换一批
              </NavSearchSwitch>
        </NavSearchTitle>
        <div>
          <NavSearchItem>科技</NavSearchItem>
        </div>
      </NavSearchTips>
    )
  } else {
    return null
  }
}

class Header extends PureComponent {
  render() {
    const { focused, handleInputFocus, handleInputBlur, login, logout } = this.props

    return (
      <HeaderWrapper>
        <Link to='/'><Logo /></Link>
        <Nav>
          <NavItem className="left active">首页</NavItem>
          <NavItem className="left">下载App</NavItem>
          {
            login ? <NavItem className="right" onClick={logout}>注销</NavItem> : <Link to='/login'><NavItem className="right">登录</NavItem></Link>
          }
          <SearchWrapper>
            <CSSTransition
              in={focused}
              timeout={200}
              classNames="slide"
            >
              <NavSearch className={focused ? 'focused' : ''}
                onFocus={handleInputFocus}
                onBlur={handleInputBlur}
              />
            </CSSTransition>
            <i className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}>
              &#xe614;
						</i>
            {getSearchList(focused)}
          </SearchWrapper>
        </Nav>
        <Addition>
          <Button className="write">
            <i className="iconfont">&#xe615;</i>写文章
          </Button>
          <Button className="reg">注册</Button>
        </Addition>
      </HeaderWrapper>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    focused: state.getIn(['header', 'focused']),
    login: state.getIn(['login', 'login'])
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    handleInputFocus() {
      dispatch(actionCreators.searchFocus())
    },
    handleInputBlur() {
      dispatch(actionCreators.searchBlur())
    },
    logout() {
      dispatch(loginActionCreators.logout())
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header)